<template>
    <div class="page">
        <div class="top-bar" @click="showPicker">
            {{currentDay|format}}
            <van-icon style="font-size: 12px;" class="arrow-down" name="arrow"></van-icon>
        </div>
        <div class="day-content" @click="goDetail()">
            <van-circle size="180px"  layer-color="#f0f0f0" v-model="progress"
                        :rate="day.current/day.total * 100" :speed="100">
                <div class="circle-content" >
                    <p class="c-tips-title">打卡人数/应到人数</p>
                    <p class="c-number">{{day.current}} / {{day.total}}</p>
                    <p class="c-link" >打卡明细
                        <van-icon style="font-size: 12px;" name="arrow"></van-icon>
                    </p>
                </div>
            </van-circle>
            <div class="count-items">
                <div class="count-item">
                    <p class="count-number">
                        {{day.notCard}}
                    </p>
                    <label>未打卡</label>
                </div>
                <div class="count-item">
                    <p class="count-number">
                        {{day.late}}
                    </p>
                    <label>迟到/早退</label>
                </div>
                <div class="count-item">
                    <p class="count-number">
                        {{day.out}}
                    </p>
                    <label>外勤</label>
                </div>
                <div class="count-item">
                    <p class="count-number">
                        {{day.leave}}
                    </p>
                    <label>请假</label>
                </div>
            </div>
        </div>
        <van-popup v-model="showDatePicker" position="bottom">
            <van-datetime-picker :max-date="maxDate" v-model="pickerDate" :type="format"
                                 @cancel="showDatePicker = false" @confirm="chooseDate"></van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    import service from "../apiNet";

    export default {
        name: "DayCard",
        data() {
            return {
                currentDay: new Date(),
                showDatePicker: false,
                maxDate: new Date(),
                format: "date",
                pickerDate: null,
                day: {
                    current: 0,
                    total: 1,
                    late: 0,
                    out: 0,
                    notCard: 0,
                    leave: 0,
                    away: 0
                },
                list:[],
                progress: 0,
            }
        },
        methods: {
            goDetail(){
                this.$router.push({
                    path:"/detail/day/list",
                    params:{
                        list:this.list
                    }
                })
            },
            showPicker() {
                this.pickerDate = this.currentDay;
                this.showDatePicker = true;
            },
            chooseDate(date) {
                this.showDatePicker = false;
                this.currentDay = date;
                this.loadDayInfo()
            },
            loadDayInfo() {
                this.$toast.loading({
                    message:"正在加载中...",
                    duration: 0,

                })
                service.loadCardInfo(this.currentDay, "day", 'YYYY.MM.DD').then(res => {

                    if (res.Error == 0) {
                        let list = res.Data
                        this.$store.commit('updateList',{userList:list})
                        let late = 0;
                        let leave = 0;
                        let out = 0;
                        let away = 0;
                        let notcard = 0;
                        this.day.total = list.length
                        list.forEach((item) => {

                            if (item.late > 0) {
                                late++;
                            }
                            if (item.outDay > 0) {
                                out++;
                                console.log(out)
                            }
                            if (item.leave > 0) {
                                leave++
                                console.log(leave)

                            }
                            if (item.notCard > 0) {
                                notcard++
                                console.log(notcard)

                            }
                            if (item.away > 0) {
                                away++
                            }
                        })

                        this.day.notCard = notcard;
                        this.day.late = late;
                        this.day.away = away;
                        this.day.leave = leave;
                        this.day.out = out;
                        this.day.current = this.day.total - this.day.notCard
                        this.$toast.clear();
                    }
                }).catch(error => {
                    this.$toast.fail("网络异常");
                    console.error(error)
                })
            }
        },
        mounted() {
            this.loadDayInfo()
        }
    }
</script>

<style lang="less">

    .day-content {
        .count-items {
            height: 100px;
            display: flex;
            flex: 1;
            width: calc(~"100% - 48px");
            margin-left: 24px;
            margin-right: 24px;
            .count-item {
                flex: 1;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #666666;
                display: flex;
                flex-direction: column;
                .count-number {
                    font-size: 20px;
                    font-weight: 600;
                    color: #333333;
                }
            }
        }
    }

</style>